﻿@page "/docs/extensions/datagrid/binding-data"

<Seo Canonical="/docs/extensions/datagrid/binding-data" Title="Blazorise DataGrid Binding Data" Description="Learn how to use Blazorise DataGrid Binding Data." />

<DocsPageTitle>
    DataGrid: Binding Data
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic Example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Large Data">
        <Paragraph>
            By default, <Code>DataGrid</Code> will load everything in memory and it will perform the necessary operations like paging, sorting and filtering. For large datasets this is impractical and so for these scenarios it is advised to load data page-by-page.
        </Paragraph>
        <Paragraph>
            This is accomplished with the use of <Code>ReadData</Code> event handler and <Code>TotalItems</Code> attribute. When you define the usage of <Code>ReadData</Code> the <Code>DataGrid</Code> will automatically switch to manual mode and every interaction with the grid will be proxied through the <Code>ReadData</Code>. This means that you as a developer will be responsible for all the loading, filtering and sorting of the data.
        </Paragraph>

        <UnorderedList>
            <UnorderedListItem><Code>ReadData</Code> event handler used to handle the loading of data</UnorderedListItem>
            <UnorderedListItem><Code>TotalItems</Code> total number of items in the source data-set</UnorderedListItem>
        </UnorderedList>

        <Paragraph>
            Bellow you can find a basic example of how to load large data and apply it to the <Code>DataGrid</Code>.

            Just as in the previous example everything is the same except that now we must define the attribute <Code>ReadData</Code> and <Code>TotalItems</Code>. They’re used to handle all of the loading, filtering and sorting of an actual data.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridLargeDataExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridLargeDataExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Virtualization">
        By setting <Code>Virtualize</Code>, you will enable virtualize capabilities on the <Code>DataGrid</Code>, meaning that instead of having pagination, you’ll be able to scroll across the data with perceived improved performance.

        Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time.

        You will still have access to every available <Code>DataGrid</Code> feature. <Code>VirtualizeOptions</Code> allows to further customize the <Code>Virtualize</Code> feature.
        <Alert Margin="Margin.Is4.FromTop" Color="Color.Info" Visible>
            <AlertDescription>
                Note that this mode requires that all rows have the same height.
            </AlertDescription>
        </Alert>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridVirtualizeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridVirtualizeExample" />
</DocsPageSection>
